import React, { useEffect } from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import axios from "axios";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useDispatch } from "react-redux";
import { loginSuccess } from "../../store/user";
import { withPerformance } from "../withPerformance";
// 导入React、antd-mobile、axios、react-router-dom
const LoginComp = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams()
  const from = searchParams.get("from") || "/";
  // 使用useNavigate钩子函数获取导航对象
  const onFinish = async (values) => {
    // 定义onFinish函数，接收表单数据
    const resp = await axios.post("/api/login", values);
    // 使用axios发送post请求，将表单数据发送到后端
    const { code, message, data } = resp.data;
    // 解构响应数据
    if (code === 200) {
      dispatch(loginSuccess(data));

      // 显示登录成功的提示信息
      Toast.show(message);
      // 跳转 
      // 判断下 是不是 从其他页面进来的 
      // 是 返回上一个页面
      // 不是 进入首页
      navigate(from, { replace: true });
    } else {
      Toast.show(message);
      // 显示登录失败的提示信息
    }
  };
  return (
    <div>
      <Form
        onFinish={onFinish}
        // 将onFinish函数绑定到表单的提交事件上
        layout="horizontal"
        // 设置表单布局为水平布局
        footer={
          <Button type="submit" block color="primary">
            登录
          </Button>
        }
        // 设置表单底部为登录按钮
      >
        <Form.Item label="用户名" name="username">
          <Input placeholder="请输入用户名"></Input>
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input placeholder="请输入密码"></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default withPerformance(LoginComp) ;
